<template>
	<view>
		<view class="uni-common-mt img-photo-part">
			<form>
				<view class="uni-list list-pd">
					<view class="uni-list-cell cell-pd">
						<view class="uni-uploader">
							<view class="uni-uploader-body">
								<view class="uni-uploader__files">
									<block v-for="(image,index) in imageList" :key="index">
										<view class="uni-uploader__file myimgwrap">
											<image  class="delete" :src="myimg" mode="" @click="deleteimg(index)"></image>
											<image  class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage"></image>
										</view>
									</block>
									<view class="uni-uploader__input-box">
										<image class="uni-uploader__input_image" src="http://ai.ylcaifu.com/appimg/images/2.0-%E4%BA%A7%E5%93%81/2.4-%E4%BA%A7%E5%93%81%E8%AF%84%E8%AE%BA/android/drawable-xhdpi/xiangji.png" mode=""></image>
										
										<view class="uni-uploader__input" @tap="chooseImage">
											</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</form>
		</view>
	</view>
</template>
<script>
	var self;
	var sourceType = [
		['camera'],
		['album'],
		['camera', 'album']
	]
	var sizeType = [
		['compressed'],
		['original'],
		['compressed', 'original']
	]
	export default {
		data() {
			return {
				myimg:require("../../../static/image/pinglun/shanchu.png"),
				title: 'choose/previewImage',
				imageList: [],
				 percent:0,
				sourceTypeIndex: 2,
				sourceType: ['拍照', '相册', '拍照或相册'],
				sizeTypeIndex: 2,
				sizeType: ['压缩', '原图', '压缩或原图'],
				countIndex: 8,
				count: [1, 2, 3, 4, 5, 6, 7, 8, 9]
			}
		},
		onUnload() {
			self=this;
			this.imageList = [],
				this.sourceTypeIndex = 2,
				this.sourceType = ['拍照', '相册', '拍照或相册'],
				this.sizeTypeIndex = 2,
				this.sizeType = ['压缩', '原图', '压缩或原图'],
				this.countIndex = 8;
		},
		methods: {
			deleteimg:function(index){
				console.log(index);
				this.imageList.splice(index,1);
			},
			sourceTypeChange: function(e) {
				this.sourceTypeIndex = e.target.value
			},
			sizeTypeChange: function(e) {
				this.sizeTypeIndex = e.target.value
			},
			countChange: function(e) {
				this.countIndex = e.target.value;
			},
			chooseImage: async function() {
					if (this.imageList.length === 9) {
						let isContinue = await this.isFullImg();
						console.log("是否继续?", isContinue);
						if (!isContinue) {
							return;
						}
					}
					uni.chooseImage({
						sourceType: sourceType[this.sourceTypeIndex],
						sizeType: sizeType[this.sizeTypeIndex],
						count: this.imageList.length + this.count[this.countIndex] > 9 ? 9 - this.imageList.length : this.count[this.countIndex],
						success: (res) => {
							console.log("临时路径==="+res.tempFilePaths);
							this.imageList = this.imageList.concat(res.tempFilePaths);
							this.$emit('click', {
								imageList: this.imageList,
							})
							 
						}
					})
				},
				isFullImg: function() {
					return new Promise((res) => {
						uni.showModal({
							content: "已经有9张图片了,是否清空现有图片？",
							success: (e) => {
								if (e.confirm) {
									this.imageList = [];
									res(true);
								} else {
									res(false)
								}
							},
							fail: () => {
								res(false)
							}
						})
					})
				},
				previewImage: function(e) {
					var current = e.target.dataset.src
					uni.previewImage({
						current: current,
						urls: this.imageList
					})
				}
		}
	}
</script>

<style>
	.cell-pd {
		padding: 22upx 0;
	}

	.list-pd::before,.list-pd::after {
		height: 0;
	}
	.delete{
		position: absolute;
		top: -8px;
		right: -8px;
		width: 30upx!important;
		height: 30upx!important;
		z-index: 100;
	}
	.myimgwrap{
		position: relative;
	}
	.uni-uploader__input-box,.uni-uploader__input,.uni-uploader__img{
		width: 150upx;
		height: 150upx;
	}
	.uni-uploader__input-box:before, .uni-uploader__input-box:after{
		height: 0;
	}
	.uni-uploader__input-box{
		justify-content: center;
		display: flex;
		align-items: center;
	}
	.uni-uploader__input_image{
		width: 60upx;
		height: 50upx;
		
	}
</style>
